import { useState } from 'react'
import { Button, Card, Input, Space, DatePicker, Select } from 'antd'
import 'antd/dist/reset.css'
import './App.css'
function App() {
  const [inputValue, setInputValue] = useState('')
  
  return (
    <div className="min-h-screen bg-gray-100 p-8">
      <div className="max-w-4xl mx-auto">
        <h1 className="text-3xl font-bold text-center mb-8">
          React + Vite + Tailwind + SCSS + Ant Design
        </h1>
        
        {/* Tailwind + SCSS 按钮区域 */}
        <Card title="Tailwind CSS + SCSS 按钮" className="mb-6">
          <Space wrap>
            <button className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
              Tailwind 按钮
            </button>
            <button className="custom-button">
              SCSS 按钮
            </button>
            <button className="custom-button secondary">
              SCSS 次要按钮
            </button>
          </Space>
        </Card>

        {/* Ant Design 组件区域 - 按需导入 */}
        <Card title="Ant Design 组件（按需导入）" className="mb-6">
          <Space direction="vertical" size="middle" style={{ width: '100%' }}>
            <Space wrap>
              <Button type="primary">主要按钮</Button>
              <Button>默认按钮</Button>
              <Button type="dashed">虚线按钮</Button>
              <Button type="link">链接按钮</Button>
            </Space>
            
            <Space wrap>
              <Input 
                placeholder="请输入内容" 
                value={inputValue}
                onChange={(e) => setInputValue(e.target.value)}
                style={{ width: 200 }}
              />
              <DatePicker placeholder="选择日期" />
              <Select
                placeholder="请选择"
                style={{ width: 120 }}
                options={[
                  { value: 'option1', label: '选项1' },
                  { value: 'option2', label: '选项2' },
                  { value: 'option3', label: '选项3' },
                ]}
              />
            </Space>
          </Space>
        </Card>

        <Card title="按需导入说明">
          <p className="text-gray-600">
            ✅ 只导入了使用的组件：Button, Card, Input, Space, DatePicker, Select<br/>
            ✅ 自动按需加载样式文件<br/>
            ✅ 减少打包体积，提高加载速度
          </p>
        </Card>
      </div>
    </div>
  )
}
export default App
